import React, { useState } from 'react';
import { NavBar, Form, Input, Radio, Button, Toast, Picker } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import '../styles/addPatient.scss';

// 关系选项
const relationOptions = [
    { label: '本人', value: '本人' },
    { label: '父亲', value: '父亲' },
    { label: '母亲', value: '母亲' },
    { label: '子女', value: '子女' },
    { label: '配偶', value: '配偶' },
    { label: '其他', value: '其他' },
];

const AddPatientPage: React.FC = () => {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [relationVisible, setRelationVisible] = useState(false);
    const [selectedRelation, setSelectedRelation] = useState('本人');

    // 处理返回按钮点击
    const handleBack = () => {
        navigate('/profile');
    };

    // 处理保存按钮点击
    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            console.log('Form values:', values);

            Toast.show({
                icon: 'success',
                content: '就诊人添加成功',
                afterClose: () => {
                    navigate('/profile');
                }
            });
        } catch (error) {
            Toast.show({
                icon: 'fail',
                content: '请填写完整信息',
            });
        }
    };

    return (
        <div className="add-patient-page">
            {/* 顶部导航栏 */}
            <NavBar
                className="nav-bar"
                onBack={handleBack}
            >
                添加就诊人
            </NavBar>

            {/* 表单内容 */}
            <div className="form-container">
                <Form
                    form={form}
                    layout="horizontal"
                    requiredMarkStyle="none"
                    className="patient-form"
                    footer={
                        <Button
                            block
                            type="submit"
                            color="primary"
                            size="large"
                            onClick={handleSubmit}
                        >
                            保存
                        </Button>
                    }
                >
                    <Form.Item
                        name="name"
                        label="姓名"
                        rules={[{ required: true, message: '请输入姓名' }]}
                    >
                        <Input placeholder="请输入姓名" />
                    </Form.Item>

                    <Form.Item
                        name="idCard"
                        label="身份证"
                        rules={[{ required: true, message: '请输入身份证号' }]}
                    >
                        <Input placeholder="请输入身份证号" />
                    </Form.Item>

                    <Form.Item
                        name="gender"
                        label="性别"
                        rules={[{ required: true, message: '请选择性别' }]}
                    >
                        <Radio.Group defaultValue="男">
                            <Radio value="男">男</Radio>
                            <Radio value="女">女</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item
                        name="relation"
                        label="关系"
                        rules={[{ required: true, message: '请选择关系' }]}
                        onClick={() => setRelationVisible(true)}
                    >
                        <div className="form-item-children">
                            <span className={selectedRelation ? '' : 'placeholder'}>
                                {selectedRelation || '请选择关系'}
                            </span>
                        </div>
                    </Form.Item>

                    <Form.Item
                        name="phone"
                        label="手机号"
                        rules={[{ required: true, message: '请输入手机号' }]}
                    >
                        <Input placeholder="请输入手机号" type="tel" />
                    </Form.Item>

                    <Form.Item
                        name="isDefault"
                        label="默认就诊人"
                    >
                        <Radio.Group defaultValue={false}>
                            <Radio value={true}>是</Radio>
                            <Radio value={false}>否</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </div>

            {/* 关系选择器 */}
            <Picker
                columns={[relationOptions]}
                visible={relationVisible}
                onClose={() => setRelationVisible(false)}
                value={[selectedRelation]}
                onConfirm={val => {
                    setSelectedRelation(val[0] as string);
                    form.setFieldValue('relation', val[0]);
                }}
            />
        </div>
    );
};

export default AddPatientPage; 